import ImageViewer from './src/ImageViewer.vue'
import { isClient } from '@/utils/is'
import { ImageViewerProps } from './src/types'
import { createComponent, unmountComponent } from '@/modules/components/FilePreview/util'

let instance: Nullable<any> = null

export function createImageViewer(options: ImageViewerProps) {
  if (!isClient) return
  const {
    urlList,
    initialIndex = 0,
    infinite = true,
    hideOnClickModal = false,
    appendToBody = false,
    zIndex = 2000,
    show = true
  } = options

  const propsData: Partial<ImageViewerProps> = {}
  propsData.urlList = urlList
  propsData.initialIndex = initialIndex
  propsData.infinite = infinite
  propsData.hideOnClickModal = hideOnClickModal
  propsData.appendToBody = appendToBody
  propsData.zIndex = zIndex
  propsData.show = show

  const close = propsData.onClose
  // 重新封装close，添加移除元素操作
  propsData.onClose = () => {
    close && close.call()
    unmountComponent(instance)
  }
  instance = createComponent(ImageViewer, propsData, null)
}
